<template>
  <view class="container">
	  <view class="search_view">
	  	<u-search shape="round" :clearabled="true" :showAction="false"></u-search>
	  </view>
	  <u-swiper height="360" :list="imgList" :effect3d="true" @click="click"></u-swiper>
	   
		<view class="tittle between align">
			<view class="align">
				<view class="tittle_shu">
					
				</view>
				<view class="tittle_font">
					推荐商品
				</view>
			</view>
			<view class="tittle_gengduo align"  @click="toGoodList()">
				查看更多
				<image src="../../static/right.png" mode="widthFix" style="width: 10px;margin-left: 10px;"></image>
			</view>
			
		</view>
		<view class="goods betweenwrap">
			<view class="goods_item" v-for="(item,index) in goodsData.slice(0,4)" @click="onTargetGoods(item.id)">
				<view class="goods_item_img center">
					<image :src="item.goodsImg" mode="widthFix" style="width: 100px;"></image>
				</view>
				<view class="goods_item_tittle">
					{{item.goodsName}}
				</view>
			</view>
			
		</view>
		<view class="tittle between align" style="margin-bottom: 10px;">
			<view class="align">
				<view class="tittle_shu">
					
				</view>
				<view class="tittle_font">
					购物返利推荐
				</view>
			</view>
			<view class="tittle_gengduo align"  @click="tohuodong()">
				查看更多
				<image src="../../static/right.png" mode="widthFix" style="width: 10px;margin-left: 10px;"></image>
			</view>
			
		</view>
		<view class="card_item" v-for="(item,index) in jackpotData.slice(0,2)" @click="toIndex(item.id)">
			<image :src="item.jackpotUrl" mode="" style="width: 100%;height: 100%;"></image>
		</view>
	  <!-- <u-swiper
	              :list="list1"
	              
	              @click="click"
	      ></u-swiper> -->
    <!-- 店铺页面组件 -->
    <!-- <Page :items="items" /> -->
  </view>
</template>

<script>
	import { jackpotList,goodsList,bannerShow } from '@/tyapi/address.js'
  import { setCartTabBadge } from '@/core/app'
  import * as Api from '@/api/page'
  import Page from '@/components/page'

  const App = getApp()

  export default {
    components: {
      Page
    },
    data() {
      return {
		  bannerList:[],
		  jackpotData:[],
		  goodsData:[],
		  imgList: [],
        // 页面参数
        options: {},
        // 页面属性
        page: {},
        // 页面元素
        items: []
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
      // 当前页面参数
      this.options = options
      // 加载页面数据
      // this.getPageData();
    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
		
      // 更新购物车角标
      setCartTabBadge()
	  this.getjackpotList()
	  this.getgoodsList()
	  this.getBannerList()
    },

    methods: {
		getBannerList(){
			this.bannerList=[]
			this.imgList=[]
			bannerShow().then(res => {
				console.log("bannerList")
				console.log(res.data)
				this.bannerList = res.data.data;
				this.bannerList.forEach(ele=>{
					this.imgList.push(ele.url)
					
				})
			})
		},
		toGoodList(){
			console.log("89292")
			uni.switchTab({
				url:'/pages/category/index'
			})
		},
		tohuodong(){
			uni.navigateTo({
				url:'/pages/prize/list'
			})
		},
		// 跳转至商品列表页
		onTargetGoods(goodsId) {
		  this.$navTo('pages/goods/detail', { goodsId })
		},
		// 获取页面数据
		getgoodsList() {
		  // const app = this
		  // app.isLoading = true
		  // Promise.all([
		  //     // 获取分类模板设置
		  //     // 优化建议: 可以将此处的false改为true 启用缓存
		  //     SettingModel.data(false),
		  //     // 获取分类列表
		  //     CategoryApi.list()
		  //   ])
		  //   .then(result => {
		  //     // 初始化分类模板设置
		  //     app.initSetting(result[0])
		  //     // 初始化分类列表数据
		  //     app.initCategory(result[1])
		  //   })
		  //   .finally(() => app.isLoading = false)
				goodsList().then(res => {
					console.log(res.data)
					this.goodsData = res.data.data;
					if(res.data.code == 200){
						if(res.data.msg == "0"){
							//没有获取userID
							uni.showToast({
								icon:"error",
								title:"请重新登录",
								duration:2000
							})
						}else if( res.data.msg == "操作成功"){
							console.log(res.data)
							this.goodsData = res.data.data;
						}
						
					}
				})
		},
		toIndex(id){
			//在起始页面跳转到test.vue页面并传递参数
			uni.navigateTo({
				url: '/pages/prize/index?id='+id
			});
		
		},
		getjackpotList(){
			jackpotList().then(res => {
				console.log(res.data)
				this.jackpotData = res.data.data;
				
			})
		},
		// 点击轮播图
		click(index){
			console.log(this.bannerList[index].name)
			
			
				uni.navigateTo({
					url: this.bannerList[index].addr
				});
			
			
		},

      /**
       * 加载页面数据
       * @param {Object} callback
       */
      getPageData(callback) {
        const app = this
        const pageId = app.options.pageId || 0
        Api.detail(pageId)
          .then(result => {
            // 设置页面数据
            const { data: { pageData } } = result
            app.page = pageData.page
            app.items = pageData.items
            // 设置顶部导航栏栏
            app.setPageBar();
          })
          .finally(() => callback && callback())
      },

      /**
       * 设置顶部导航栏
       */
      setPageBar() {
        const {
          page
        } = this
        // 设置页面标题
        uni.setNavigationBarTitle({
          title: page.params.title
        });
        // 设置navbar标题、颜色
        uni.setNavigationBarColor({
          frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
          backgroundColor: page.style.titleBackgroundColor
        })
      },

    },

    /**
     * 下拉刷新
     */
    onPullDownRefresh() {
      // 获取首页数据
      this.getPageData(() => {
        uni.stopPullDownRefresh()
      })
    },

    /**
     * 分享当前页面
     */
    onShareAppMessage() {
      const app = this
      const { page } = app
      return {
        title: page.params.share_title,
        path: "/pages/index/index?" + app.$getShareUrlParams()
      }
    },

    /**
     * 分享到朋友圈
     * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
     * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
     */
    onShareTimeline() {
      const app = this
      const { page } = app
      return {
        title: page.params.share_title,
        path: "/pages/index/index?" + app.$getShareUrlParams()
      }
    }

  }
</script>

<style lang="scss" scoped>
	.card_item{
		width: 100%;
		height: 340rpx;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 10rpx;
	}
	.tittle{
		padding: 10rpx;
		height: 30px;
		margin-top: 10px;
		// background-color: #fff;
	}
	.tittle_shu{
		background-color: #fa2209;
		width: 6px;
		height: 20px;
		border-radius: 33px;
	}
	.tittle_font{
		font-family: 思源黑体;
		font-size: 20px;
		font-weight: bold;
		line-height: normal;
		letter-spacing: 0em;
		margin-left: 10px;
		color: #3D3D3D;
	}
	.tittle_gengduo{
		font-family: 思源黑体;
		font-size: 18px;
		font-weight: normal;
		line-height: normal;
		letter-spacing: 0em;
		
		/* 正文色/正文色 */
		color: #1A1A1A;
	}
  .container {
    background: #fff;
	background: linear-gradient(to bottom, #fff9d9, #fff9ef);
  }
  .search_view{
	  padding: 10rpx;
  }
  .goods{
	  padding: 10rpx;
	  height: 400px;
  }
  .goods_item{
	  padding: 10px;
	  border-radius: 10px 0px 10px 0px;
	  opacity: 1;
	  margin-bottom: 10px;
	  background-color: #fff;
	  /* 金彩山/辅助色 */
	  // border: 1px solid #fa2209;
  }
  .goods_item_tittle{
	  font-family: 思源黑体;
	  font-size: 16px;
	  font-weight: bold;
	  line-height: normal;
	  letter-spacing: 0em;
	  width: 155px;
	  color: #3D3D3D;
  }
</style>
